<template>
    <div class="bodyStyle">
        <div class="topStyle">
            <div class="van-multi-ellipsis--l2 titleStyle">{{ obj.title }}</div>
            <div class="extraTitleStyle">
                <div style="display: flex;flex-direction: row;align-items: center;">
                    <div><van-icon name="browsing-history-o" /></div>
                    <div> {{ obj.remark || 0 }}</div>
                </div>
                <div>{{ obj.createTime }}</div>
            </div>
        </div>
        <div style="margin-bottom: 30px;" v-if="obj.vedioUrl">
            <iframe :src="obj.vedioUrl" allowFullScreen="true" frameborder="0" class="video-player"></iframe>
            <!-- <video-player class="video-player vjs-big-play-centered" :src="obj.vedioUrl" crossorigin="anonymous"
                playsinline controls :volume="0.6" :height="320" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
                @mounted="handleMounted" @ready="handleEvent($event)" @play="handleEvent($event)"
                @pause="handleEvent($event)" @ended="handleEvent($event)" @loadeddata="handleEvent($event)"
                @waiting="handleEvent($event)" @playing="handleEvent($event)" @canplay="handleEvent($event)"
                @canplaythrough="handleEvent($event)" /> -->
        </div>

        <div v-html="obj.context" class="HTMLCSS">
        </div>
        <div style="height: 120px;width: 100%;"></div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, shallowRef } from 'vue';
import { viewNewsById } from '@/api/learn.js';
// import { VideoPlayer } from '@videojs-player/vue'
// import 'video.js/dist/video-js.css'

const props = defineProps(['id'])

const obj = ref({})

const player = shallowRef()

onMounted(() => {
    getViewNewsById()
})

const handleMounted = (payload) => {
    player.value = payload.player
    console.log('Basic player mounted', payload)
}

const handleEvent = (log) => {
    console.log('Basic player event', log)
}

function getViewNewsById() {
    let newsId = props.id
    viewNewsById(newsId).then(res => {
        //https://vjs.zencdn.net/v/oceans.mp4
        if (res.code == 200) {
            console.log(res)
            obj.value = res.data
        }
    })
}
</script>
<style lang="less" scoped>
.HTMLCSS /deep/ img{
    max-width: 100%;
}
.bodyStyle {
    width: 95%;
    margin: 0 2.5%;
}

.topStyle {
    margin-bottom: 20px;

    .titleStyle {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        line-break: anywhere;
        -webkit-box-orient: vertical;
    }

    .extraTitleStyle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 99%;
        margin: 0 0.5%;
        color: var(--van-card-desc-color);
    }

}

.video-player {
    background-color: black;
    width: 100%;
    height: 350px;
}
</style>
